<template>


    <div class="page">
        <van-nav-bar
                class="title"
                title="左右商城登录注册"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />


        <div v-show="phone">
            <van-cell-group style="margin-top: 30px" >
                <van-field v-model="value1" clearable  placeholder="请输入手机号" />
            </van-cell-group>

            <van-button
                    style="margin-top: 30px"
                    class="title"
                    size="25"
                    color="red"
                    round block type="info"
                    native-type="submit"
                    @click="handleLogin1">
                下一步
            </van-button>
        </div>

        <div v-show="code">

            <van-field
                    v-model="value2"
                    center
                    clearable
                    name="验证码"
                    placeholder="请输入短信验证码"
            >
                <template #button style="margin: 16px;">
                    <van-button
                            color="linear-gradient(to right,#7232dd, #7232dd, #ff6034, #ee0a24)"
                            size="small"
                            :disabled="disabled"
                            @click="sendCode"
                            type="primary">
                        {{codeBtnText}}</van-button>
                </template>
            </van-field>

            <!--<van-cell-group style="margin-top: 30px" >
                <van-field v-model="value2" clearable  placeholder="请输入验证码" />
            </van-cell-group>-->

            <van-button
                    style="margin-top: 30px"
                    class="title"
                    size="25"
                    color="red"
                    round block type="info"
                    native-type="submit"
                    @click="handleLogin2">
                下一步
            </van-button>


        </div>
    </div>

</template>

<script>
    import { Dialog } from 'vant';
    import axios from 'axios';

export default {
    name: "register",
    data() {
        return {
            time: 0,
            codeBtnText: '获取验证码',
            disabled: false,
            code: false,
            phone: true,
            value1: '',
            value2: '',
            show: false,
            message: '',
        }
    },
    created() {
        Dialog.confirm({
            confirmButtonColor:"red",
            title: '注册协议及隐私政策',
            message: '' +
                '在您注册成为本商城用户的过程中，\n' +
                '您需要完成我们的注册流程并通过   \n' +
                '点击同意的形式在线签署一下协议   \n' +
                '您务必仔细阅读、充分理解协议中   \n' +
                '的条框内容后再点击同意 : \n ' +
                '《左右商城用户注册协议》\n' +
                '《左右商城隐私政策》\n' +
                '点击同意即表示您已阅读并同意 \n' +
                '《左右商城用户注册协议》\n' +
                '与《左右商城隐私政策》\n' +
                ' 并将您的订单信息共享给为完成 \n' +
                '此订单所必须的第三方合作方。',
        })
            .then(() => {

            })
            .catch(() => {

                this.$router.go(-1);
            });

    },

    methods: {

        sendCode(){
            this.time = 60;
            this.disabled = true;
            this.timer();
        },
        timer() {
            if (this.time > 0) {
                this.time--;
                this.codeBtnText = this.time + "s后获取";
                setTimeout(this.timer, 1000);
            } else {
                this.time = 0;
                this.codeBtnText = "获取验证码";
                this.disabled = false;
            }
        },


        onClickLeft(){

            Dialog.confirm({
                title: '返回',
                message: '确定退出"注册"吗？',
            })
                .then(() => {
                    this.$router.go(-1);
                })
                .catch(() => {
                    // on cancel
                });

        },

        handleLogin1(){

           /* var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = 'https://ssl.captcha.qq.com/TCaptcha.js';
                document.head.appendChild(script);*/

            var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
            if (this.value1 == ""){
                this.$toast("手机号不能为空");
            }else if (!reg.test(this.value1)){
                this.$toast("手机号格式不正确");
            }else{

                this.time = 60;
                this.disabled = true;
                this.timer();
                axios.get('http://localhost:8001/sign/send',{
                    params: {
                        value: this.value1
                    }
                }).then( result => {
                    if (result.data.userId == 200){
                        this.code = true;
                        this.phone = false;

                        this.$toast("短信已发送");
                    }else{
                        this.$toast("发送失败");
                    }
                });
            }
        },
        handleLogin2(){
            if (this.value2.length == 6 && /^\d{6}$/.test(this.value2)){

                let param = new URLSearchParams();
                param.append('value',this.value1);
                param.append('sms',this.value2);

                this.$axios({
                    method: 'post',
                    url: 'http://localhost:8001/sign/inquiry',
                    data: param
                }).then( resver => {
                    if (resver.data != ""){
                        console.log(resver.data.userId);
                        this.users.userId = resver.data.userId;
                        var storage = window.localStorage;
                        var a = JSON.stringify(resver.data);
                        storage.setItem("user",a);
                        this.$router.replace('/');

                    }else{
                        this.$toast('您的手机号或验证码不正确');
                    }
                });
            }else{
                this.$toast('验证码为 6 位数字');
            }
        }
    }

}

</script>

<style scoped>

    .page {
        padding: 10px 15px;
    }
</style>
